{% stylesheet %}
.block_twitter .block_title {
  margin-bottom: 0;
}

.block_twitter .twitter_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.block_twitter .twitter_left {
  width: calc(100% - 500px);
  padding: 0 100px 0 0;
  box-sizing: border-box;
}

.block_twitter .twitter_right {
  width: 500px;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
}

.block_twitter .twitter_content_style {
  flex-direction: row-reverse;
}

.block_twitter .twitter_content_style .twitter_left {
  padding: 0 0 0 100px;
}

@media (max-width: 768px) {
  .block_twitter .twitter_content_style,
  .block_twitter .twitter_content {
    flex-direction: column;
  }
  .block_twitter .twitter_content_style .twitter_left,
  .block_twitter .twitter_left {
    padding: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }
  .block_twitter .twitter_right {
    width: 100%;
    /* min-height: 300px !important; */
  }
}

{% endstylesheet %}

<div class="block_twitter">
    <div class="container_wrapper">
        <div class="twitter_content {% if section.settings.position == '2' %}twitter_content_style{% endif %}">
            <div class="twitter_left">
							{% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

            </div>
            <div class="twitter_right" style="min-height:{% if section.settings.height %} {{ section.settings.height }}{% else %}500{% endif %}px;">
                
                <a class="twitter-timeline" data-width="100%" data-height="{% if section.settings.height %} {{ section.settings.height }}{% else %}500{% endif %}"  href="https://twitter.com/{{ section.settings.account }}"></a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            
            </div>
        </div>
    </div>
</div>


{% schema %}
{
	"tag": "section",
	"class": "block_twitter",
	"is_global": false,
	"name": {
		"zh_CN": "Twitter",
		"en_US": "Twitter"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "Twitter"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": "Embedded timelines are an easy way to embed Tweets on your website in a compact, linear view. Display the latest Tweets from a Twitter account, lists, or your curated collections."
		},
		{
			"type": "card_input",
			"id": "account",
			"label": {
				"zh_CN": "账号",
				"en_US": "Account number"
			},
			"placeholder": {
				"zh_CN": "请输入账号,如XXXXX",
				"en_US": "Please enter account, such as XXXXX"
			},
			"info": {
				"zh_CN": "Twitter账号，例如: https://twitter.com/XXXXX",
				"en_US": "Twitter account, for example: https://twitter.com/XXXXX"
			}
		},
		{
			"type": "card_input",
			"id": "height",
			"label": {
				"zh_CN": "高度",
				"en_US": "Height"
			},
			"default": "500"
		},
		{
			"type": "card_select",
			"id": "position",
			"label": {
				"zh_CN": "描述位置",
				"en_US": "To describe location"
			},
			"option": [
				{
					"label": {
						"zh_CN": "居左",
						"en_US": "To the left"
					},
					"value": "1"
				},
				{
					"label": {
						"zh_CN": "居右",
						"en_US": "To the right"
					},
					"value": "2"
				}
			],
			"default": "1"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "Twitter",
			"detail": "Embedded timelines are an easy way to embed Tweets on your website in a compact, linear view. Display the latest Tweets from a Twitter account, lists, or your curated collections.",
			"account": "",
			"height": "500",
			"position": "1"
		},
		"blocks": []
	},
	"icon": "icon-twitter"
}
{% endschema %}